<!--  -->
<template>
  <div class="musicList">
    <div class="list_wrap">
      <div class="item_wrap">
        <div
          @dblclick="startSong(item)"
          v-for="(item, index) in songs"
          :key="index"
          :class="{ active_position: item.id === songId }"
          class="item"
        >
          <div class="cover">
            <div>{{ index + 1 }}</div>
            <!-- <img :src="item.al.picUrl" alt="" /> -->
            <!-- <el-image lazy :src="item.al.picUrl" fit="cover"></el-image> -->
          </div>
          <div class="info">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="creator_name">
              <span @click="toSingerDetail(item.ar[0].id)">{{
                item.ar[0].name
              }}</span>
            </div>
          </div>
          <div class="album">
            <span @click="toAlbum(item.al.id)">{{ item.al.name }}</span>
          </div>
          <div class="timer">{{ Math.floor(item.dt / 1000) | timeFormat }}</div>
          <div class="btn">
            <div
              @click="handleLike(true, item.id)"
              v-if="likeList.indexOf(item.id) == -1"
              class="iconfont icon-aixin1 like"
            ></div>
            <div
              v-else
              @click="handleLike(false, item.id)"
              class="iconfont icon-aixin"
            ></div>
            <div
              @click="download(item.id, item.name)"
              class="iconfont icon-yunxiazai_o load"
            ></div>
          </div>
          <div class="mv">
            <el-button
              @click="toDetail(item.mv)"
              size="mini"
              v-if="item.mv != 0"
              type="primary"
              >mv</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getMusicUrl } from "@/util/findMusic";
import { mapGetters } from "vuex";
import { getDownloadUrl } from "@/util/music.js";
import { getLikeMusic, getLikeMusicList } from "@/util/songListPage";
export default {
  name: "",
  props: {
    songs: [],
    songListId: null,
  },
  data() {
    return {
      id: "",
      count: 0,
      isLike: false,
      likeList: [],
    };
  },
  created() {
    if (this.loginStatus == "true") {
      this.getLikeList();
    }
  },
  watch: {
    isLike(newVal) {
      this.getLikeList();
    },
  },
  computed: {
    ...mapGetters("userInfo", ["userId", "loginStatus"]),
    ...mapGetters("musicPlay", [
      //当前播放列表
      "playList",
      //当前播放歌曲id
      "songId",
      //是否在播放
      "isPlaying",
      //历史播放列表
      "hasPlayList",
      //当前播放歌曲url
      "musicUrl",
    ]),
  },
  methods: {
    //播放歌曲
    async startSong(musicDetail) {
      // this.getMusicUrl(musicDetail.id);

      //保存当前播放列表
      this.$store.dispatch("musicPlay/savePlayList", this.songs);
      sessionStorage.setItem("playList", JSON.stringify(this.songs));

      //保存播放状态
      this.$store.dispatch("musicPlay/saveIsPlaying", "true");

      //保存当前歌单id
      this.$store.dispatch("musicPlay/saveSongListId", this.songListId);

      //保存当前歌曲id
      this.$store.dispatch("musicPlay/saveSongId", musicDetail.id);
      sessionStorage.setItem("songId", musicDetail.id);
    },
    //获取歌曲播放链接
    async getMusicUrl(id) {
      let {
        data: { data },
      } = await getMusicUrl(id);
      // console.log(data);

      //保存歌曲url
      this.$store.dispatch("musicPlay/saveMusicUrl", data[0].url);
      sessionStorage.setItem("musicUrl", data[0].url);
    },
    toDetail(id) {
      this.$store.dispatch("musicPlay/saveIsPlaying", 'false');

      this.$router.push("/mvDetail/" + id);
    },
    //下载1歌曲
    async download(id, name) {
      let {
        data: { data },
      } = await getDownloadUrl(id);
      // console.log(data)
      if (data.url) {
        const fileName = name; // 导出文件名
        axios({
          url: data.url,
          responseType: "blob",
          headers: { "content-type": "audio/mpeg" },
        }).then((res) => {
          // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
          // IE10以上支持blob但是依然不支持download
          const blob = new Blob([res.data], { type: res.data.type });
          if ("download" in document.createElement("a")) {
            // 支持a标签download的浏览器
            const link = document.createElement("a"); // 创建a标签
            link.download = fileName; // a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); // 执行下载
            URL.revokeObjectURL(link.href); // 释放url
          }
        });
      } else {
        this.$message("开通会员后可下载");
      }
    },
    //获取喜欢音乐列表
    async getLikeList() {
      let { data } = await getLikeMusicList(this.userId);
      // console.log(data);
      this.likeList = data.ids;
    },
    //喜欢音乐
    async handleLike(type, id) {
      let { data } = await getLikeMusic(id, type);
      if (!data.code) {
        this.$message.success("请勿重复添加哦!");
      }
      // console.log(data);
      if (data.code == 200 && type == true) {
        this.$message.success("已添加到我喜欢的音乐");
        this.isLike = true;
      } else {
        this.$message("取消喜欢成功");
        this.isLike = false;
      }
    },
    //跳转去专辑
    toAlbum(id) {
      this.$router.push("/abumetail/" + id);
    },
    //跳转到歌手详情
    toSingerDetail(id) {
      this.$router.push("/singerInfo/" + id);
    },
  },
};
</script>

<style lang='less' scoped>
.musicList {
  padding: 3rem 5.25rem;
  .list_wrap {
    width: 95%;
    .item_wrap {
      .item {
        background-color: #fff;
        height: 40px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        border-radius: 10px;
        .cover {
          // margin: 0 10px;
          width: 45px;
          height: 45px;
          // border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #263869;
          font-weight: 600;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.1);
          }
        }
        .info {
          cursor: pointer;
          margin-left: 10px;
          width: 30%;
          .name {
            width: 100%;
            font-weight: 600;
            font-size: 17px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .creator_name {
            color: #525252;
            font-size: 13px;
            span:hover {
              text-decoration: underline;
            }
          }
        }
        .album {
          cursor: pointer;
          color: #525252;
          width: 30%;
          font-size: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          span:hover {
            text-decoration: underline;
          }
        }
        .timer {
          margin-left: 5px;
          color: #525252;
          font-size: 15px;
        }
        .btn {
          width: 20%;
          display: flex;
          align-items: center;
          justify-content: center;
          div {
            display: none;
            margin-left: 20px;
          }
          div:hover {
            transform: scale(1.1);
          }
          .like {
            font-size: 15px;
          }
        }
        .mv {
          width: 8%;
          text-align: right;
          margin-right: 10px;
          &:hover .el-button {
            transform: scale(1.1);
          }
          .el-button {
            background-color: #fff;
            color: rgb(16, 24, 134);
            font-weight: 600;
            border: none;
            border-radius: 5px;
          }
        }
      }
      .active_position {
        color: #335eea;
        background: #eaeffd;
        .info {
          .name,
          .creator_name {
            color: #335eea;
          }
        }
        .album,
        .timer {
          color: #335eea;
        }
      }
      .item:hover {
        background-color: #f6f6f8;
      }
      .item:hover .btn div {
        display: block;
      }
    }
  }
}
</style>